<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Dojo Form Elements and Decorators - Zend Framework Manual</title>

    <link href="../css/shCore.css" rel="stylesheet" type="text/css" />
    <link href="../css/shThemeDefault.css" rel="stylesheet" type="text/css" />
    <link href="../css/styles.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Zend Framework</h1>
<h2>Programmer's Reference Guide</h2>
<ul>
    <li><a href="../en/zend.dojo.form.html">Inglês (English)</a></li>
    <li><a href="../pt-br/zend.dojo.form.html">Português Brasileiro (Brazilian Portuguese)</a></li>
</ul>
<table width="100%">
    <tr valign="top">
        <td width="85%">
            <table width="100%">
                <tr>
                    <td width="25%" style="text-align: left;">
                    <a href="zend.dojo.view.html">Dojo View Helpers</a>
                    </td>

                    <td width="50%" style="text-align: center;">
                        <div class="up"><span class="up"><a href="zend.dojo.html">Zend_Dojo</a></span><br />
                        <span class="home"><a href="manual.html">Guia de Refer&ecirc;ncia do Programador</a></span></div>
                    </td>

                    <td width="25%" style="text-align: right;">
                        <div class="next" style="text-align: right; float: right;"><a href="zend.dojo.build-layers.html">Zend_Dojo build layer support</a></div>
                    </td>
                </tr>
            </table>
<hr />
<div id="zend.dojo.form" class="section"><div class="info"><h1 class="title">Dojo Form Elements and Decorators</h1></div>
    

    <p class="para">
        Building on the <a href="zend.dojo.view.html#zend.dojo.view.dijit" class="link">dijit view
        helpers</a>, the <span class="classname">Zend_Dojo_Form</span> family of classes
        provides the ability to utilize Dijits natively within your forms.
    </p>

    <p class="para">
        There are three options for utilizing the Dojo form elements with your
        forms:
    </p>

    <ul class="itemizedlist">
        <li class="listitem">
            <p class="para">
                Use  <span class="methodname">Zend_Dojo::enableForm()</span>. This will add plugin
                paths for decorators and elements to all attached form items,
                recursively. Additionally, it will dojo-enable the view object.
                Note, however, that any sub forms you attach
                <em class="emphasis">after</em> this call will also need to be
                passed through  <span class="methodname">Zend_Dojo::enableForm()</span>.
            </p>
        </li>

        <li class="listitem">
            <p class="para">
                Use the Dojo-specific form and subform implementations,
                <span class="classname">Zend_Dojo_Form</span> and
                <span class="classname">Zend_Dojo_Form_SubForm</span> respectively. These can be
                used as drop-in replacements for <span class="classname">Zend_Form</span> and
                <span class="classname">Zend_Form_SubForm</span>, contain all the appropriate
                decorator and element paths, set a Dojo-specific default
                DisplayGroup class, and dojo-enable the view.
            </p>
        </li>

        <li class="listitem">
            <p class="para">
                Last, and most tedious, you can set the appropriate decorator
                and element paths yourself, set the default DisplayGroup class,
                and dojo-enable the view. Since
                 <span class="methodname">Zend_Dojo::enableForm()</span> does this already, there&#039;s
                little reason to go this route.
            </p>
        </li>
    </ul>

    <div class="example" id="zend.dojo.form.enable"><div class="info"><p><b>Example #1 Enabling Dojo in your existing forms</b></p></div>
        

        <div class="example-contents"><p>
            &quot;But wait,&quot; you say; &quot;I&#039;m already extending <span class="classname">Zend_Form</span> with my own
            custom form class! How can I Dojo-enable it?&#039;&quot;
        </p></div>

        <div class="example-contents"><p>
            First, and easiest, simply change from extending
            <span class="classname">Zend_Form</span> to extending <span class="classname">Zend_Dojo_Form</span>,
            and update any places where you instantiate
            <span class="classname">Zend_Form_SubForm</span> to instantiate
            <span class="classname">Zend_Dojo_Form_SubForm</span>.
        </p></div>

        <div class="example-contents"><p>
            A second approach is to call  <span class="methodname">Zend_Dojo::enableForm()</span>
            within your custom form&#039;s  <span class="methodname">init()</span> method; when the form
            definition is complete, loop through all SubForms to dojo-enable
            them:
        </p></div>

        <pre class="programlisting brush: php">
class My_Form_Custom extends Zend_Form
{
    public function init()
    {
        // Dojo-enable the form:
        Zend_Dojo::enableForm($this);

        // ... continue form definition from here

        // Dojo-enable all sub forms:
        foreach ($this-&gt;getSubForms() as $subForm) {
            Zend_Dojo::enableForm($subForm);
        }
    }
}
</pre>

    </div>

    <p class="para">
        Usage of the dijit-specific form decorators and elements is just like
        using any other form decorator or element.
    </p>

    <div class="section" id="zend.dojo.form.decorators"><div class="info"><h1 class="title">Dijit-Specific Form Decorators</h1></div>
    

    <p class="para">
        Most form elements can use the DijitElement decorator, which will grab
        the dijit parameters from the elements, and pass these and other
        metadata to the view helper specified by the element. For decorating
        forms, sub forms, and display groups, however, there are a set of
        decorators corresponding to the various layout dijits.
    </p>

    <p class="para">
        All dijit decorators look for the <span class="property">dijitParams</span> property of
        the given element being decorated, and push them as the
        <var class="varname">$params</var> array to the dijit view helper being used; these
        are then separated from any other properties so that no duplication of
        information occurs.
    </p>

    <div class="section" id="zend.dojo.form.decorators.dijitElement"><div class="info"><h1 class="title">DijitElement Decorator</h1></div>
        

        <p class="para">
            Just like <a href="zend.form.standardDecorators.html#zend.form.standardDecorators.viewHelper" class="link">the
                ViewHelper decorator</a>, DijitElement expects a
            <span class="property">helper</span> property in the element which it will then use
            as the view helper when rendering. Dijit parameters will typically
            be pulled directly from the element, but may also be passed in as
            options via the <span class="property">dijitParams</span> key (the value of that key
            should be an associative array of options).
        </p>

        <p class="para">
            It is important that each element have a unique ID (as fetched from
            the element&#039;s  <span class="methodname">getId()</span> method). If duplicates are
            detected within the  <span class="methodname">dojo()</span> view helper, the decorator
            will trigger a notice, but then create a unique ID by appending the
            return of  <span class="methodname">uniqid()</span> to the identifier.
        </p>

        <p class="para">
            Standard usage is to simply associate this decorator as the first
            in your decorator chain, with no additional options.
        </p>

        <div class="example" id="zend.dojo.form.decorators.dijitElement.usage"><div class="info"><p><b>Example #2 DijitElement Decorator Usage</b></p></div>
            

            <pre class="programlisting brush: php">
$element-&gt;setDecorators(array(
    &#039;DijitElement&#039;,
    &#039;Errors&#039;,
    &#039;Label&#039;,
    &#039;ContentPane&#039;,
));
</pre>

        </div>
    </div>

    <div class="section" id="zend.dojo.form.decorators.dijitForm"><div class="info"><h1 class="title">DijitForm Decorator</h1></div>
        

        <p class="para">
            The DijitForm decorator is very similar to the <a href="zend.form.standardDecorators.html#zend.form.standardDecorators.form" class="link">Form
                decorator</a>; in fact, it can be used basically
            interchangeably with it, as it utilizes the same view helper name
            (&#039;form&#039;).
        </p>

        <p class="para">
            Since <strong class="command">dijit.form.Form</strong> does not require any dijit parameters for
            configuration, the main difference is that the dijit form view
            helper require that a <acronym class="acronym">DOM</acronym> ID is passed to ensure that programmatic
            dijit creation can work. The decorator ensures this, by passing the
            form name as the identifier.
        </p>
    </div>

    <div class="section" id="zend.dojo.form.decorators.dijitContainer"><div class="info"><h1 class="title">DijitContainer-based Decorators</h1></div>
        

        <p class="para">
            The <span class="classname">DijitContainer</span> decorator is actually an abstract
            class from which a variety of other decorators derive. It offers
            the same functionality of <a href="zend.dojo.form.html#zend.dojo.form.decorators.dijitElement" class="link">DijitElement</a>,
            with the addition of title support. Many layout dijits require or
            can utilize a title; DijitContainer will utilize the element&#039;s
            legend property, if available, and can also utilize either the
            &#039;legend&#039; or &#039;title&#039; decorator option, if passed. The title will be
            translated if a translation adapter with a corresponding
            translation is present.
        </p>

        <p class="para">
            The following is a list of decorators that inherit from
            <span class="classname">DijitContainer</span>:
        </p>

        <ul class="itemizedlist">
            <li class="listitem"><p class="para">AccordionContainer</p></li>
            <li class="listitem"><p class="para">AccordionPane</p></li>
            <li class="listitem"><p class="para">BorderContainer</p></li>
            <li class="listitem"><p class="para">ContentPane</p></li>
            <li class="listitem"><p class="para">SplitContainer</p></li>
            <li class="listitem"><p class="para">StackContainer</p></li>
            <li class="listitem"><p class="para">TabContainer</p></li>
        </ul>

        <div class="example" id="zend.dojo.form.decorators.dijitContainer.usage"><div class="info"><p><b>Example #3 DijitContainer Decorator Usage</b></p></div>
            

            <pre class="programlisting brush: php">
// Use a TabContainer for your form:
$form-&gt;setDecorators(array(
    &#039;FormElements&#039;,
    array(&#039;TabContainer&#039;, array(
        &#039;id&#039;          =&gt; &#039;tabContainer&#039;,
        &#039;style&#039;       =&gt; &#039;width: 600px; height: 500px;&#039;,
        &#039;dijitParams&#039; =&gt; array(
            &#039;tabPosition&#039; =&gt; &#039;top&#039;
        ),
    )),
    &#039;DijitForm&#039;,
));

// Use a ContentPane in your sub form (which can be used with all but
// AccordionContainer):
$subForm-&gt;setDecorators(array(
    &#039;FormElements&#039;,
    array(&#039;HtmlTag&#039;, array(&#039;tag&#039; =&gt; &#039;dl&#039;)),
    &#039;ContentPane&#039;,
));
</pre>

        </div>
    </div>
</div>
    <div class="section" id="zend.dojo.form.elements"><div class="info"><h1 class="title">Dijit-Specific Form Elements</h1></div>
    

    <p class="para">
        Each form dijit for which a view helper is provided has a corresponding
        <span class="classname">Zend_Form</span> element. All of them have the following methods
        available for manipulating dijit parameters:
    </p>

    <ul class="itemizedlist">
        <li class="listitem">
            <p class="para">
                 <span class="methodname">setDijitParam($key, $value)</span>: set a single dijit
                parameter. If the dijit parameter already exists, it will be
                overwritten.
            </p>
        </li>

        <li class="listitem">
            <p class="para">
                 <span class="methodname">setDijitParams(array $params)</span>: set several dijit
                parameters at once. Any passed parameters matching those
                already present will overwrite.
            </p>
        </li>

        <li class="listitem">
            <p class="para">
                 <span class="methodname">hasDijitParam($key)</span>: If a given dijit parameter
                is defined and present, return <b><tt>TRUE</tt></b>, otherwise return
                <b><tt>FALSE</tt></b>.
            </p>
        </li>

        <li class="listitem">
            <p class="para">
                 <span class="methodname">getDijitParam($key)</span>: retrieve the given dijit
                parameter. If not available, a <b><tt>NULL</tt></b> value is returned.
            </p>
        </li>

        <li class="listitem">
            <p class="para">
                 <span class="methodname">getDijitParams()</span>: retrieve all dijit parameters.
            </p>
        </li>

        <li class="listitem">
            <p class="para">
                 <span class="methodname">removeDijitParam($key)</span>: remove the given dijit parameter.
            </p>
        </li>

        <li class="listitem">
            <p class="para">
                 <span class="methodname">clearDijitParams()</span>: clear all currently defined
                dijit parameters.
            </p>
        </li>
    </ul>

    <p class="para">
        Dijit parameters are stored in the <span class="property">dijitParams</span> public
        property. Thus, you can dijit-enable an existing form element simply by
        setting this property on the element; you simply will not have the
        above accessors to facilitate manipulating the parameters.
    </p>

    <p class="para">
        Additionally, dijit-specific elements implement a different list of
        decorators, corresponding to the following:
    </p>

    <pre class="programlisting brush: php">
$element-&gt;addDecorator(&#039;DijitElement&#039;)
        -&gt;addDecorator(&#039;Errors&#039;)
        -&gt;addDecorator(&#039;HtmlTag&#039;, array(&#039;tag&#039; =&gt; &#039;dd&#039;))
        -&gt;addDecorator(&#039;Label&#039;, array(&#039;tag&#039; =&gt; &#039;dt&#039;));
</pre>


    <p class="para">
        In effect, the DijitElement decorator is used in place of the standard
        ViewHelper decorator.
    </p>

    <p class="para">
        Finally, the base Dijit element ensures that the Dojo view helper path
        is set on the view.
    </p>

    <p class="para">
        A variant on DijitElement, DijitMulti, provides the functionality of
        the <span class="classname">Multi</span> abstract form element, allowing the developer to
        specify &#039;multiOptions&#039; -- typically select options or radio options.
    </p>

    <p class="para">
        The following dijit elements are shipped in the standard Zend
        Framework distribution.
    </p>

    <div class="section" id="zend.dojo.form.elements.button"><div class="info"><h1 class="title">Button</h1></div>
        

        <p class="para">
            While not deriving from <a href="zend.form.standardElements.html#zend.form.standardElements.button" class="link">the standard Button
                element</a>, it does implement the same functionality, and
            can be used as a drop-in replacement for it. The following
            functionality is exposed:
        </p>

        <ul class="itemizedlist">
            <li class="listitem">
                <p class="para">
                     <span class="methodname">getLabel()</span> will utilize the element name as the
                    button label if no name is provided. Additionally, it will
                    translate the name if a translation adapter with a matching
                    translation message is available.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">isChecked()</span> determines if the value submitted
                    matches the label; if so, it returns <b><tt>TRUE</tt></b>. This is useful
                    for determining which button was used when a form was submitted.
                </p>
            </li>
        </ul>

        <p class="para">
            Additionally, only the decorators <span class="classname">DijitElement</span> and
            <span class="classname">DtDdWrapper</span> are utilized for Button elements.
        </p>

        <div class="example" id="zend.dojo.form.elements.button.example"><div class="info"><p><b>Example #4 Example Button dijit element usage</b></p></div>
            

            <pre class="programlisting brush: php">
$form-&gt;addElement(
    &#039;Button&#039;,
    &#039;foo&#039;,
    array(
        &#039;label&#039; =&gt; &#039;Button Label&#039;,
    )
);
</pre>

        </div>
    </div>

    <div class="section" id="zend.dojo.form.elements.checkBox"><div class="info"><h1 class="title">CheckBox</h1></div>
        

        <p class="para">
            While not deriving from <a href="zend.form.standardElements.html#zend.form.standardElements.checkbox" class="link">the standard
                Checkbox element</a>, it does implement the same
            functionality. This means that the following methods are exposed:
        </p>

        <ul class="itemizedlist">
            <li class="listitem">
                <p class="para">
                     <span class="methodname">setCheckedValue($value)</span>: set the value to use when
                    the element is checked.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">getCheckedValue()</span>: get the value of the item to
                    use when checked.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setUncheckedValue($value)</span>: set the value of the
                    item to use when it is unchecked.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">getUncheckedValue()</span>: get the value of the item to
                    use when it is unchecked.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setChecked($flag)</span>: mark the element as checked or
                    unchecked.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">isChecked()</span>: determine if the element is currently
                    checked.
                </p>
            </li>
        </ul>

        <div class="example" id="zend.dojo.form.elements.checkBox.example"><div class="info"><p><b>Example #5 Example CheckBox dijit element usage</b></p></div>
            

            <pre class="programlisting brush: php">
$form-&gt;addElement(
    &#039;CheckBox&#039;,
    &#039;foo&#039;,
    array(
        &#039;label&#039;          =&gt; &#039;A check box&#039;,
        &#039;checkedValue&#039;   =&gt; &#039;foo&#039;,
        &#039;uncheckedValue&#039; =&gt; &#039;bar&#039;,
        &#039;checked&#039;        =&gt; true,
    )
);
</pre>

        </div>
    </div>

    <div class="section" id="zend.dojo.form.elements.comboBox"><div class="info"><h1 class="title">ComboBox and FilteringSelect</h1></div>
        

        <p class="para">
            As noted in the ComboBox <a href="zend.dojo.view.html#zend.dojo.view.dijit.form" class="link">dijit view helper
                documentation</a>, ComboBoxes are a hybrid between select
            and text input, allowing for autocompletion and the ability to
            specify an alternate to the options provided. FilteringSelects are
            the same, but do not allow arbitrary input.
        </p>

        <blockquote class="note"><p><b class="note">Note</b>: <span class="info"><b>ComboBoxes return the label values</b><br /></span>
            

            <p class="para">
                ComboBoxes return the label values, and not the option values,
                which can lead to a disconnect in expectations. For this reason,
                ComboBoxes do not auto-register an <span class="classname">InArray</span>
                validator (though FilteringSelects do).
            </p>
        </p></blockquote>

        <p class="para">
            The ComboBox and FilteringSelect form elements provide accessors and mutators for
            examining and setting the select options as well as specifying a
            <strong class="command">dojo.data</strong> datastore (if used). They extend from DijitMulti, which
            allows you to specify select options via the
             <span class="methodname">setMultiOptions()</span> and  <span class="methodname">setMultiOption()</span>
            methods. In addition, the following methods are available:
        </p>

        <ul class="itemizedlist">
            <li class="listitem">
                <p class="para">
                     <span class="methodname">getStoreInfo()</span>: get all datastore information
                    currently set. Returns an empty array if no data is currently set.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setStoreId($identifier)</span>: set the store identifier
                    variable (usually referred to by the attribute &#039;jsId&#039; in Dojo).
                    This should be a valid javascript variable name.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">getStoreId()</span>: retrieve the store identifier
                    variable name.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setStoreType($dojoType)</span>: set the datastore class
                    to use; e.g., &quot;<strong class="command">dojo.data.ItemFileReadStore</strong>&quot;.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">getStoreType()</span>: get the dojo datastore class to use.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setStoreParams(array $params)</span>: set any parameters
                    used to configure the datastore object. As an example,
                    <strong class="command">dojo.data.ItemFileReadStore</strong> datastore would expect a &#039;url&#039;
                    parameter pointing to a location that would return the
                    <strong class="command">dojo.data</strong> object.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">getStoreParams()</span>: get any datastore parameters
                    currently set; if none, an empty array is returned.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setAutocomplete($flag)</span>: indicate whether or not
                    the selected item will be used when the user leaves the element.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">getAutocomplete()</span>: get the value of the
                    autocomplete flag.
                </p>
            </li>
        </ul>

        <p class="para">
            By default, if no <strong class="command">dojo.data</strong> store is registered with the element,
            this element registers an <span class="classname">InArray</span> validator which
            validates against the array keys of registered options. You can
            disable this behavior by either calling
             <span class="methodname">setRegisterInArrayValidator(false)</span>, or by passing a
            <b><tt>FALSE</tt></b> value to the <span class="property">registerInArrayValidator</span>
            configuration key.
        </p>

        <div class="example" id="zend.dojo.form.elements.comboBox.selectExample"><div class="info"><p><b>Example #6 ComboBox dijit element usage as select input</b></p></div>
            

            <pre class="programlisting brush: php">
$form-&gt;addElement(
    &#039;ComboBox&#039;,
    &#039;foo&#039;,
    array(
        &#039;label&#039;        =&gt; &#039;ComboBox (select)&#039;,
        &#039;value&#039;        =&gt; &#039;blue&#039;,
        &#039;autocomplete&#039; =&gt; false,
        &#039;multiOptions&#039; =&gt; array(
            &#039;red&#039;    =&gt; &#039;Rouge&#039;,
            &#039;blue&#039;   =&gt; &#039;Bleu&#039;,
            &#039;white&#039;  =&gt; &#039;Blanc&#039;,
            &#039;orange&#039; =&gt; &#039;Orange&#039;,
            &#039;black&#039;  =&gt; &#039;Noir&#039;,
            &#039;green&#039;  =&gt; &#039;Vert&#039;,
        ),
    )
);
</pre>

        </div>

        <div class="example" id="zend.dojo.form.elements.comboBox.datastoreExample"><div class="info"><p><b>Example #7 ComboBox dijit element usage with datastore</b></p></div>
            

            <pre class="programlisting brush: php">
$form-&gt;addElement(
    &#039;ComboBox&#039;,
    &#039;foo&#039;,
    array(
        &#039;label&#039;       =&gt; &#039;ComboBox (datastore)&#039;,
        &#039;storeId&#039;     =&gt; &#039;stateStore&#039;,
        &#039;storeType&#039;   =&gt; &#039;dojo.data.ItemFileReadStore&#039;,
        &#039;storeParams&#039; =&gt; array(
            &#039;url&#039; =&gt; &#039;/js/states.txt&#039;,
        ),
        &#039;dijitParams&#039; =&gt; array(
            &#039;searchAttr&#039; =&gt; &#039;name&#039;,
        ),
    )
);
</pre>

        </div>

        <p class="para">
            The above examples could also utilize <span class="classname">FilteringSelect</span>
            instead of <span class="classname">ComboBox</span>.
        </p>
    </div>

    <div class="section" id="zend.dojo.form.elements.currencyTextBox"><div class="info"><h1 class="title">CurrencyTextBox</h1></div>
        

        <p class="para">
            The CurrencyTextBox is primarily for supporting currency input. The
            currency may be localized, and can support both fractional and
            non-fractional values.
        </p>

        <p class="para">
            Internally, CurrencyTextBox derives from <a href="zend.dojo.form.html#zend.dojo.form.elements.numberTextBox" class="link">NumberTextBox</a>,
            <a href="zend.dojo.form.html#zend.dojo.form.elements.validationTextBox" class="link">ValidationTextBox</a>,
            and <a href="zend.dojo.form.html#zend.dojo.form.elements.textBox" class="link">TextBox</a>;
            all methods available to those classes are available. In addition,
            the following constraint methods can be used:
        </p>

        <ul class="itemizedlist">
            <li class="listitem">
                <p class="para">
                     <span class="methodname">setCurrency($currency)</span>: set the currency type to
                    use; should follow the <a href="http://en.wikipedia.org/wiki/ISO_4217" class="link external">&raquo; ISO-4217</a> specification.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">getCurrency()</span>: retrieve the current currency type.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setSymbol($symbol)</span>: set the 3-letter <a href="http://en.wikipedia.org/wiki/ISO_4217" class="link external">&raquo; ISO-4217</a>
                    currency symbol to use.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">getSymbol()</span>: get the current currency symbol.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setFractional($flag)</span>: set whether or not the
                    currency should allow for fractional values.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">getFractional()</span>: retrieve the status of the
                    fractional flag.
                </p>
            </li>
        </ul>

        <div class="example" id="zend.dojo.form.elements.currencyTextBox.example"><div class="info"><p><b>Example #8 Example CurrencyTextBox dijit element usage</b></p></div>
            

            <pre class="programlisting brush: php">
$form-&gt;addElement(
    &#039;CurrencyTextBox&#039;,
    &#039;foo&#039;,
    array(
        &#039;label&#039;          =&gt; &#039;Currency:&#039;,
        &#039;required&#039;       =&gt; true,
        &#039;currency&#039;       =&gt; &#039;USD&#039;,
        &#039;invalidMessage&#039; =&gt; &#039;Invalid amount. &#039; .
                            &#039;Include dollar sign, commas, and cents.&#039;,
        &#039;fractional&#039;     =&gt; false,
    )
);
</pre>

        </div>
    </div>

    <div class="section" id="zend.dojo.form.elements.dateTextBox"><div class="info"><h1 class="title">DateTextBox</h1></div>
        

        <p class="para">
            DateTextBox provides a calendar drop-down for selecting a date, as
            well as client-side date validation and formatting.
        </p>

        <p class="para">
            Internally, DateTextBox derives from <a href="zend.dojo.form.html#zend.dojo.form.elements.validationTextBox" class="link">ValidationTextBox</a>
            and <a href="zend.dojo.form.html#zend.dojo.form.elements.textBox" class="link">TextBox</a>;
            all methods available to those classes are available. In addition,
            the following methods can be used to set individual constraints:
        </p>

        <ul class="itemizedlist">
            <li class="listitem">
                <p class="para">
                     <span class="methodname">setAmPm($flag)</span> and  <span class="methodname">getAmPm()</span>:
                    Whether or not to use AM or PM strings in times.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setStrict($flag)</span> and
                     <span class="methodname">getStrict()</span>: whether or not to use strict regular
                    expression matching when validating input. If <b><tt>FALSE</tt></b>, which
                    is the default, it will be lenient about whitespace and some abbreviations.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setLocale($locale)</span> and
                     <span class="methodname">getLocale()</span>: Set and retrieve the locale to use with
                    this specific element.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setDatePattern($pattern)</span> and
                     <span class="methodname">getDatePattern()</span>: provide and retrieve the <a href="http://www.unicode.org/reports/tr35/#Date_Format_Patterns" class="link external">&raquo; unicode
                        date format pattern</a> for formatting the date.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setFormatLength($formatLength)</span> and
                     <span class="methodname">getFormatLength()</span>: provide and retrieve the format
                    length type to use; should be one of &quot;long&quot;, &quot;short&quot;, &quot;medium&quot; or &quot;full&quot;.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setSelector($selector)</span> and
                     <span class="methodname">getSelector()</span>: provide and retrieve the style of
                    selector; should be either &quot;date&quot; or &quot;time&quot;.
                </p>
            </li>
        </ul>

        <div class="example" id="zend.dojo.form.elements.dateTextBox.example"><div class="info"><p><b>Example #9 Example DateTextBox dijit element usage</b></p></div>
            

            <pre class="programlisting brush: php">
$form-&gt;addElement(
    &#039;DateTextBox&#039;,
    &#039;foo&#039;,
    array(
        &#039;label&#039;          =&gt; &#039;Date:&#039;,
        &#039;required&#039;       =&gt; true,
        &#039;invalidMessage&#039; =&gt; &#039;Invalid date specified.&#039;,
        &#039;formatLength&#039;   =&gt; &#039;long&#039;,
    )
);
</pre>

        </div>
    </div>

    <div class="section" id="zend.dojo.form.elements.editor"><div class="info"><h1 class="title">Editor</h1></div>
        

        <p class="para">
            Editor provides a <acronym class="acronym">WYSIWYG</acronym> editor that can be used to both create and
            edit rich <acronym class="acronym">HTML</acronym> content. <strong class="command">dijit.Editor</strong> is pluggable
            and may be extended with custom plugins if desired; see <a href="http://dojotoolkit.org/reference-guide/dijit/Editor.html" class="link external">&raquo; the
                dijit.Editor documentation</a> for more details.
        </p>

        <p class="para">
            The Editor form element provides a number of accessors and mutators
            for manipulating various dijit parameters, as follows:
        </p>

        <ul class="itemizedlist">
            <li class="listitem">
                <p class="para">
                    <em class="emphasis">captureEvents</em> are events that connect
                    to the editing area itself. The following accessors and
                    mutators are available for manipulating capture events:
                </p>

                <ul class="itemizedlist">
                    <li class="listitem">
                        <p class="para"> <span class="methodname">addCaptureEvent($event)</span></p>
                    </li>

                    <li class="listitem">
                        <p class="para"> <span class="methodname">addCaptureEvents(array $events)</span></p>
                    </li>

                    <li class="listitem">
                        <p class="para"> <span class="methodname">setCaptureEvents(array $events)</span></p>
                    </li>

                    <li class="listitem"><p class="para"> <span class="methodname">getCaptureEvents()</span></p></li>

                    <li class="listitem">
                        <p class="para"> <span class="methodname">hasCaptureEvent($event)</span></p>
                    </li>

                    <li class="listitem">
                        <p class="para"> <span class="methodname">removeCaptureEvent($event)</span></p>
                    </li>

                    <li class="listitem">
                        <p class="para"> <span class="methodname">clearCaptureEvents()</span></p>
                    </li>
                </ul>
            </li>

            <li class="listitem">
                <p class="para">
                    <em class="emphasis">events</em> are standard <acronym class="acronym">DOM</acronym> events, such as
                    onClick, onKeyUp, etc. The following accessors and mutators
                    are available for manipulating events:
                </p>

                <ul class="itemizedlist">
                    <li class="listitem"><p class="para"> <span class="methodname">addEvent($event)</span></p></li>

                    <li class="listitem">
                        <p class="para"> <span class="methodname">addEvents(array $events)</span></p>
                    </li>

                    <li class="listitem">
                        <p class="para"> <span class="methodname">setEvents(array $events)</span></p>
                    </li>

                    <li class="listitem"><p class="para"> <span class="methodname">getEvents()</span></p></li>
                    <li class="listitem"><p class="para"> <span class="methodname">hasEvent($event)</span></p></li>
                    <li class="listitem"><p class="para"> <span class="methodname">removeEvent($event)</span></p></li>
                    <li class="listitem"><p class="para"> <span class="methodname">clearEvents()</span></p></li>
                </ul>
            </li>

            <li class="listitem">
                <p class="para">
                    <em class="emphasis">plugins</em> add functionality to the
                    Editor -- additional tools for the toolbar, additional
                    styles to allow, etc. The following accessors and mutators
                    are available for manipulating plugins:
                </p>

                <ul class="itemizedlist">
                    <li class="listitem"><p class="para"> <span class="methodname">addPlugin($plugin)</span></p></li>

                    <li class="listitem">
                        <p class="para"> <span class="methodname">addPlugins(array $plugins)</span></p>
                    </li>

                    <li class="listitem">
                        <p class="para"> <span class="methodname">setPlugins(array $plugins)</span></p>
                    </li>

                    <li class="listitem"><p class="para"> <span class="methodname">getPlugins()</span></p></li>
                    <li class="listitem"><p class="para"> <span class="methodname">hasPlugin($plugin)</span></p></li>
                    <li class="listitem"><p class="para"> <span class="methodname">removePlugin($plugin)</span></p></li>
                    <li class="listitem"><p class="para"> <span class="methodname">clearPlugins()</span></p></li>
                </ul>
            </li>

            <li class="listitem">
                <p class="para">
                    <em class="emphasis">editActionInterval</em> is used to group
                    events for undo operations. By default, this value is 3
                    seconds. The method
                     <span class="methodname">setEditActionInterval($interval)</span> may be used to
                    set the value, while  <span class="methodname">getEditActionInterval()</span>
                    will retrieve it.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                    <em class="emphasis">focusOnLoad</em> is used to determine
                    whether this particular editor will receive focus when the
                    page has loaded. By default, this is <b><tt>FALSE</tt></b>. The method
                     <span class="methodname">setFocusOnLoad($flag)</span> may be used to
                    set the value, while  <span class="methodname">getFocusOnLoad()</span>
                    will retrieve it.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                    <em class="emphasis">height</em> specifies the height of the
                    editor; by default, this is 300px. The method
                     <span class="methodname">setHeight($height)</span> may be used to set the
                    value, while  <span class="methodname">getHeight()</span> will retrieve it.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                    <em class="emphasis">inheritWidth</em> is used to determine
                    whether the editor will use the parent container&#039;s width or
                    simply default to 100% width. By default, this is <b><tt>FALSE</tt></b>
                    (i.e., it will fill the width of the window). The method
                     <span class="methodname">setInheritWidth($flag)</span> may be used to set the
                    value, while  <span class="methodname">getInheritWidth()</span> will retrieve
                    it.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                    <em class="emphasis">minHeight</em> indicates the minimum height
                    of the editor; by default, this is 1em. The method
                     <span class="methodname">setMinHeight($height)</span> may be used to set the
                    value, while  <span class="methodname">getMinHeight()</span> will retrieve it.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                    <em class="emphasis">styleSheets</em> indicate what additional
                    <acronym class="acronym">CSS</acronym> stylesheets should be used to affect the display of the
                    Editor. By default, none are registered, and it inherits the
                    page styles. The following accessors and mutators are
                    available for manipulating editor stylesheets:
                </p>

                <ul class="itemizedlist">
                    <li class="listitem">
                        <p class="para"> <span class="methodname">addStyleSheet($styleSheet)</span></p>
                    </li>

                    <li class="listitem">
                        <p class="para"> <span class="methodname">addStyleSheets(array $styleSheets)</span></p>
                    </li>

                    <li class="listitem">
                        <p class="para"> <span class="methodname">setStyleSheets(array $styleSheets)</span></p>
                    </li>

                    <li class="listitem"><p class="para"> <span class="methodname">getStyleSheets()</span></p></li>

                    <li class="listitem">
                        <p class="para"> <span class="methodname">hasStyleSheet($styleSheet)</span></p>
                    </li>

                    <li class="listitem">
                        <p class="para"> <span class="methodname">removeStyleSheet($styleSheet)</span></p>
                    </li>

                    <li class="listitem"><p class="para"> <span class="methodname">clearStyleSheets()</span></p></li>
                </ul>
            </li>
        </ul>

        <div class="example" id="zend.dojo.form.elements.editor.example"><div class="info"><p><b>Example #10 Example Editor dijit element usage</b></p></div>
            

            <pre class="programlisting brush: php">
$form-&gt;addElement(&#039;editor&#039;, &#039;content&#039;, array(
    &#039;plugins&#039;            =&gt; array(&#039;undo&#039;, &#039;|&#039;, &#039;bold&#039;, &#039;italic&#039;),
    &#039;editActionInterval&#039; =&gt; 2,
    &#039;focusOnLoad&#039;        =&gt; true,
    &#039;height&#039;             =&gt; &#039;250px&#039;,
    &#039;inheritWidth&#039;       =&gt; true,
    &#039;styleSheets&#039;        =&gt; array(&#039;/js/custom/editor.css&#039;),
));
</pre>

        </div>

        <blockquote class="note"><p><b class="note">Note</b>: <span class="info"><b>Editor Dijit uses div by default</b><br /></span>
            

            <p class="para">
                The Editor dijit uses an <acronym class="acronym">HTML</acronym> <acronym class="acronym">DIV</acronym> by default.
                The <strong class="command">dijit._editor.RichText</strong> documentation indicates that
                having it built on an <acronym class="acronym">HTML</acronym> <acronym class="acronym">TEXTAREA</acronym> can
                potentially have security implications.
            </p>

            <p class="para">
                That said, there may be times when you want an Editor widget that can gracefully
                degrade to a <acronym class="acronym">TEXTAREA</acronym>. In such situations, you can do so by
                setting the <span class="property">degrade</span> property to <b><tt>TRUE</tt></b>:
            </p>

            <pre class="programlisting brush: php">
// At instantiation:
$editor = new Zend_Dojo_Form_Element_Editor(&#039;foo&#039;, array(
    &#039;degrade&#039; =&gt; true,
));

// Construction via the form:
$form-&gt;addElement(&#039;editor&#039;, &#039;content&#039;, array(
    &#039;degrade&#039; =&gt; true,
));

// Or after instantiation:
$editor-&gt;degrade = true;
</pre>

        </p></blockquote>
    </div>

    <div class="section" id="zend.dojo.form.elements.horizontalSlider"><div class="info"><h1 class="title">HorizontalSlider</h1></div>
        

        <p class="para">
            HorizontalSlider provides a slider UI widget for selecting a
            numeric value in a range. Internally, it sets the value of a hidden
            element which is submitted by the form.
        </p>

        <p class="para">
            HorizontalSlider derives from the <a href="zend.dojo.form.html#zend.dojo.form.elements.slider" class="link">abstract Slider dijit
                element</a>. Additionally, it has a variety of methods for
            setting and configuring slider rules and rule labels.
        </p>

        <ul class="itemizedlist">
            <li class="listitem">
                <p class="para">
                     <span class="methodname">setTopDecorationDijit($dijit)</span> and
                     <span class="methodname">setBottomDecorationDijit($dijit)</span>: set the name
                    of the dijit to use for either the top or bottom of the
                    slider. This should not include the &quot;dijit.form.&quot; prefix,
                    but rather only the final name -- one of &quot;HorizontalRule&quot;
                    or &quot;HorizontalRuleLabels&quot;.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setTopDecorationContainer($container)</span> and
                     <span class="methodname">setBottomDecorationContainer($container)</span>:
                    specify the name to use for the container element of the
                    rules; e.g. &#039;topRule&#039;, &#039;topContainer&#039;, etc.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setTopDecorationLabels(array $labels)</span> and
                     <span class="methodname">setBottomDecorationLabels(array $labels)</span>: set
                    the labels to use for one of the RuleLabels dijit types.
                    These should be an indexed array; specify a single empty
                    space to skip a given label position (such as the beginning
                    or end).
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setTopDecorationParams(array $params)</span> and
                     <span class="methodname">setBottomDecorationParams(array $params)</span>:
                    dijit parameters to use when configuring the given Rule or
                    RuleLabels dijit.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setTopDecorationAttribs(array $attribs)</span> and
                     <span class="methodname">setBottomDecorationAttribs(array $attribs)</span>:
                    <acronym class="acronym">HTML</acronym> attributes to specify for the given Rule or RuleLabels
                    <acronym class="acronym">HTML</acronym> element container.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">getTopDecoration()</span> and
                     <span class="methodname">getBottomDecoration()</span>: retrieve all metadata
                    for a given Rule or RuleLabels definition, as provided by
                    the above mutators.
                </p>
            </li>
        </ul>

        <div class="example" id="zend.dojo.form.elements.horizontalSlider.example"><div class="info"><p><b>Example #11 Example HorizontalSlider dijit element usage</b></p></div>
            

            <div class="example-contents"><p>
                The following will create a horizontal slider selection with
                integer values ranging from -10 to 10. The top will have labels
                at the 20%, 40%, 60%, and 80% marks. The bottom will have rules
                at 0, 50%, and 100%. Each time the value is changed, the hidden
                element storing the value will be updated.
            </p></div>

            <pre class="programlisting brush: php">
$form-&gt;addElement(
    &#039;HorizontalSlider&#039;,
    &#039;horizontal&#039;,
    array(
        &#039;label&#039;                     =&gt; &#039;HorizontalSlider&#039;,
        &#039;value&#039;                     =&gt; 5,
        &#039;minimum&#039;                   =&gt; -10,
        &#039;maximum&#039;                   =&gt; 10,
        &#039;discreteValues&#039;            =&gt; 11,
        &#039;intermediateChanges&#039;       =&gt; true,
        &#039;showButtons&#039;               =&gt; true,
        &#039;topDecorationDijit&#039;        =&gt; &#039;HorizontalRuleLabels&#039;,
        &#039;topDecorationContainer&#039;    =&gt; &#039;topContainer&#039;,
        &#039;topDecorationLabels&#039;       =&gt; array(
                &#039; &#039;,
                &#039;20%&#039;,
                &#039;40%&#039;,
                &#039;60%&#039;,
                &#039;80%&#039;,
                &#039; &#039;,
        ),
        &#039;topDecorationParams&#039;      =&gt; array(
            &#039;container&#039; =&gt; array(
                &#039;style&#039; =&gt; &#039;height:1.2em; font-size=75%;color:gray;&#039;,
            ),
            &#039;list&#039; =&gt; array(
                &#039;style&#039; =&gt; &#039;height:1em; font-size=75%;color:gray;&#039;,
            ),
        ),
        &#039;bottomDecorationDijit&#039;     =&gt; &#039;HorizontalRule&#039;,
        &#039;bottomDecorationContainer&#039; =&gt; &#039;bottomContainer&#039;,
        &#039;bottomDecorationLabels&#039;    =&gt; array(
                &#039;0%&#039;,
                &#039;50%&#039;,
                &#039;100%&#039;,
        ),
        &#039;bottomDecorationParams&#039;   =&gt; array(
            &#039;list&#039; =&gt; array(
                &#039;style&#039; =&gt; &#039;height:1em; font-size=75%;color:gray;&#039;,
            ),
        ),
    )
);
</pre>

        </div>
    </div>

    <div class="section" id="zend.dojo.form.elements.numberSpinner"><div class="info"><h1 class="title">NumberSpinner</h1></div>
        

        <p class="para">
            A number spinner is a text element for entering numeric values; it
            also includes elements for incrementing and decrementing the value
            by a set amount.
        </p>

        <p class="para">
            The following methods are available:
        </p>

        <ul class="itemizedlist">
            <li class="listitem">
                <p class="para">
                     <span class="methodname">setDefaultTimeout($timeout)</span> and
                     <span class="methodname">getDefaultTimeout()</span>: set and retrieve the default
                    timeout, in milliseconds, between when the button is held
                    pressed and the value is changed.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setTimeoutChangeRate($rate)</span> and
                     <span class="methodname">getTimeoutChangeRate()</span>: set and retrieve the
                    rate, in milliseconds, at which changes will be made when a
                    button is held pressed.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setLargeDelta($delta)</span> and
                     <span class="methodname">getLargeDelta()</span>: set and retrieve the amount by
                    which the numeric value should change when a button is held pressed.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setSmallDelta($delta)</span> and
                     <span class="methodname">getSmallDelta()</span>: set and retrieve the delta by
                    which the number should change when a button is pressed once.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setIntermediateChanges($flag)</span> and
                     <span class="methodname">getIntermediateChanges()</span>: set and retrieve the
                    flag indicating whether or not each value change should be
                    shown when a button is held pressed.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setRangeMessage($message)</span> and
                     <span class="methodname">getRangeMessage()</span>: set and retrieve the message
                    indicating the range of values available.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setMin($value)</span> and  <span class="methodname">getMin()</span>:
                    set and retrieve the minimum value possible.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setMax($value)</span> and  <span class="methodname">getMax()</span>:
                    set and retrieve the maximum value possible.
                </p>
            </li>
        </ul>

        <div class="example" id="zend.dojo.form.elements.numberSpinner.example"><div class="info"><p><b>Example #12 Example NumberSpinner dijit element usage</b></p></div>
            

            <pre class="programlisting brush: php">
$form-&gt;addElement(
    &#039;NumberSpinner&#039;,
    &#039;foo&#039;,
    array(
        &#039;value&#039;             =&gt; &#039;7&#039;,
        &#039;label&#039;             =&gt; &#039;NumberSpinner&#039;,
        &#039;smallDelta&#039;        =&gt; 5,
        &#039;largeDelta&#039;        =&gt; 25,
        &#039;defaultTimeout&#039;    =&gt; 500,
        &#039;timeoutChangeRate&#039; =&gt; 100,
        &#039;min&#039;               =&gt; 9,
        &#039;max&#039;               =&gt; 1550,
        &#039;places&#039;            =&gt; 0,
        &#039;maxlength&#039;         =&gt; 20,
    )
);
</pre>

        </div>
    </div>

    <div class="section" id="zend.dojo.form.elements.numberTextBox"><div class="info"><h1 class="title">NumberTextBox</h1></div>
        

        <p class="para">
            A number text box is a text element for entering numeric values;
            unlike NumberSpinner, numbers are entered manually. Validations and
            constraints can be provided to ensure the number stays in a
            particular range or format.
        </p>

        <p class="para">
            Internally, NumberTextBox derives from <a href="zend.dojo.form.html#zend.dojo.form.elements.validationTextBox" class="link">ValidationTextBox</a>
            and <a href="zend.dojo.form.html#zend.dojo.form.elements.textBox" class="link">TextBox</a>;
            all methods available to those classes are available. In addition,
            the following methods can be used to set individual constraints:
        </p>

        <ul class="itemizedlist">
            <li class="listitem">
                <p class="para">
                     <span class="methodname">setLocale($locale)</span> and
                     <span class="methodname">getLocale()</span>: specify and retrieve a specific or
                    alternate locale to use with this dijit.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setPattern($pattern)</span> and
                     <span class="methodname">getPattern()</span>: set and retrieve a <a href="http://www.unicode.org/reports/tr35/#Number_Format_Patterns" class="link external">&raquo; number
                        pattern format</a> to use to format the number.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setType($type)</span> and  <span class="methodname">getType()</span>:
                    set and retrieve the numeric format type to use (should be one of
                    &#039;decimal&#039;, &#039;percent&#039;, or &#039;currency&#039;).
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setPlaces($places)</span> and
                     <span class="methodname">getPlaces()</span>: set and retrieve the number of decimal
                    places to support.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setStrict($flag)</span> and
                     <span class="methodname">getStrict()</span>: set and retrieve the value of the strict
                    flag, which indicates how much leniency is allowed in relation to whitespace and
                    non-numeric characters.
                </p>
            </li>
        </ul>

        <div class="example" id="zend.dojo.form.elements.numberTextBox.example"><div class="info"><p><b>Example #13 Example NumberTextBox dijit element usage</b></p></div>
            

            <pre class="programlisting brush: php">
$form-&gt;addElement(
    &#039;NumberTextBox&#039;,
    &#039;elevation&#039;,
    array(
        &#039;label&#039;          =&gt; &#039;NumberTextBox&#039;,
        &#039;required&#039;       =&gt; true,
        &#039;invalidMessage&#039; =&gt; &#039;Invalid elevation.&#039;,
        &#039;places&#039;         =&gt; 0,
        &#039;constraints&#039;    =&gt; array(
            &#039;min&#039;    =&gt; -20000,
            &#039;max&#039;    =&gt; 20000,
        ),
    )
);
</pre>

        </div>
    </div>

    <div class="section" id="zend.dojo.form.elements.passwordTextBox"><div class="info"><h1 class="title">PasswordTextBox</h1></div>
        

        <p class="para">
            PasswordTextBox is simply a ValidationTextBox that is tied to a
            password input; its sole purpose is to allow for a dijit-themed text
            entry for passwords that also provides client-side validation.
        </p>

        <p class="para">
            Internally, PasswordTextBox derives from <a href="zend.dojo.form.html#zend.dojo.form.elements.validationTextBox" class="link">ValidationTextBox</a>
            and <a href="zend.dojo.form.html#zend.dojo.form.elements.textBox" class="link">TextBox</a>;
            all methods available to those classes are available.
        </p>

        <div class="example" id="zend.dojo.form.elements.passwordTextBox.example"><div class="info"><p><b>Example #14 Example PasswordTextBox dijit element usage</b></p></div>
            

            <pre class="programlisting brush: php">
$form-&gt;addElement(
    &#039;PasswordTextBox&#039;,
    &#039;password&#039;,
    array(
        &#039;label&#039;          =&gt; &#039;Password&#039;,
        &#039;required&#039;       =&gt; true,
        &#039;trim&#039;           =&gt; true,
        &#039;lowercase&#039;      =&gt; true,
        &#039;regExp&#039;         =&gt; &#039;^[a-z0-9]{6,}$&#039;,
        &#039;invalidMessage&#039; =&gt; &#039;Invalid password; &#039; .
                            &#039;must be at least 6 alphanumeric characters&#039;,
    )
);
</pre>

        </div>
    </div>

    <div class="section" id="zend.dojo.form.elements.radioButton"><div class="info"><h1 class="title">RadioButton</h1></div>
        

        <p class="para">
            RadioButton wraps standard radio input elements to provide a
            consistent look and feel with other dojo dijits.
        </p>

        <p class="para">
            RadioButton extends from DijitMulti, which
            allows you to specify select options via the
             <span class="methodname">setMultiOptions()</span> and  <span class="methodname">setMultiOption()</span>
            methods.
        </p>

        <p class="para">
            By default, this element registers an <span class="classname">InArray</span> validator
            which validates against the array keys of registered options. You
            can disable this behavior by either calling
             <span class="methodname">setRegisterInArrayValidator(false)</span>, or by passing a
            <b><tt>FALSE</tt></b> value to the <span class="property">registerInArrayValidator</span>
            configuration key.
        </p>

        <div class="example" id="zend.dojo.form.elements.radioButton.example"><div class="info"><p><b>Example #15 Example RadioButton dijit element usage</b></p></div>
            

            <pre class="programlisting brush: php">
$form-&gt;addElement(
    &#039;RadioButton&#039;,
    &#039;foo&#039;,
    array(
        &#039;label&#039; =&gt; &#039;RadioButton&#039;,
        &#039;multiOptions&#039;  =&gt; array(
            &#039;foo&#039; =&gt; &#039;Foo&#039;,
            &#039;bar&#039; =&gt; &#039;Bar&#039;,
            &#039;baz&#039; =&gt; &#039;Baz&#039;,
        ),
        &#039;value&#039; =&gt; &#039;bar&#039;,
    )
);
</pre>

        </div>
    </div>

    <div class="section" id="zend.dojo.form.elements.simpletextarea"><div class="info"><h1 class="title">SimpleTextarea</h1></div>
        

        <p class="para">
            SimpleTextarea acts primarily like a standard <acronym class="acronym">HTML</acronym> textarea. However,
            it does not support either the rows or cols settings. Instead, the
            textarea width should be specified using standard <acronym class="acronym">CSS</acronym> measurements.
            Unlike Textarea, it will not grow automatically
        </p>

        <div class="example" id="zend.dojo.form.elements.simpletextarea.example"><div class="info"><p><b>Example #16 Example SimpleTextarea dijit element usage</b></p></div>
            

            <pre class="programlisting brush: php">
$form-&gt;addElement(
    &#039;SimpleTextarea&#039;,
    &#039;simpletextarea&#039;,
    array(
        &#039;label&#039;    =&gt; &#039;SimpleTextarea&#039;,
        &#039;required&#039; =&gt; true,
        &#039;style&#039;    =&gt; &#039;width: 80em; height: 25em;&#039;,
    )
);
</pre>

        </div>
    </div>

    <div class="section" id="zend.dojo.form.elements.slider"><div class="info"><h1 class="title">Slider abstract element</h1></div>
        

        <p class="para">
            Slider is an abstract element from which
            <a href="zend.dojo.form.html#zend.dojo.form.elements.horizontalSlider" class="link">HorizontalSlider</a>
            and <a href="zend.dojo.form.html#zend.dojo.form.elements.verticalSlider" class="link">VerticalSlider</a>
            both derive. It exposes a number of common methods for configuring
            your sliders, including:
        </p>

        <ul class="itemizedlist">
            <li class="listitem">
                <p class="para">
                     <span class="methodname">setClickSelect($flag)</span> and
                     <span class="methodname">getClickSelect()</span>: set and retrieve the flag
                    indicating whether or not clicking the slider changes the value.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setIntermediateChanges($flag)</span> and
                     <span class="methodname">getIntermediateChanges()</span>: set and retrieve the
                    flag indicating whether or not the dijit will send a
                    notification on each slider change event.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setShowButtons($flag)</span> and
                     <span class="methodname">getShowButtons()</span>: set and retrieve the flag
                    indicating whether or not buttons on either end will be
                    displayed; if so, the user can click on these to change the
                    value of the slider.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setDiscreteValues($value)</span> and
                     <span class="methodname">getDiscreteValues()</span>: set and retrieve the number
                    of discrete values represented by the slider.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setMaximum($value)</span> and
                     <span class="methodname">getMaximum()</span>: set the maximum value of the slider.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setMinimum($value)</span> and
                     <span class="methodname">getMinimum()</span>: set the minimum value of the slider.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setPageIncrement($value)</span> and
                     <span class="methodname">getPageIncrement()</span>: set the amount by which the
                    slider will change on keyboard events.
                </p>
            </li>
        </ul>

        <p class="para">
            Example usage is provided with each concrete extending class.
        </p>
    </div>

    <div class="section" id="zend.dojo.form.elements.submitButton"><div class="info"><h1 class="title">SubmitButton</h1></div>
        

        <p class="para">
            While there is no Dijit named SubmitButton, we include one here to
            provide a button dijit capable of submitting a form without
            requiring any additional javascript bindings. It works exactly like
            the <a href="zend.dojo.form.html#zend.dojo.form.elements.button" class="link">Button dijit</a>.
        </p>

        <div class="example" id="zend.dojo.form.elements.submitButton.example"><div class="info"><p><b>Example #17 Example SubmitButton dijit element usage</b></p></div>
            

            <pre class="programlisting brush: php">
$form-&gt;addElement(
    &#039;SubmitButton&#039;,
    &#039;foo&#039;,
    array(
        &#039;required&#039;   =&gt; false,
        &#039;ignore&#039;     =&gt; true,
        &#039;label&#039;      =&gt; &#039;Submit Button!&#039;,
    )
);
</pre>

        </div>
    </div>

    <div class="section" id="zend.dojo.form.elements.textBox"><div class="info"><h1 class="title">TextBox</h1></div>
        

        <p class="para">
            TextBox is included primarily to provide a text input with
            consistent look-and-feel to the other dijits. However, it also
            includes some minor filtering and validation capabilities,
            represented in the following methods:
        </p>

        <ul class="itemizedlist">
            <li class="listitem">
                <p class="para">
                     <span class="methodname">setLowercase($flag)</span> and
                     <span class="methodname">getLowercase()</span>: set and retrieve the flag
                    indicating whether or not input should be cast to lowercase.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setPropercase($flag)</span> and
                     <span class="methodname">getPropercase()</span>: set and retrieve the flag
                    indicating whether or not the input should be cast to Proper Case.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setUppercase($flag)</span> and
                     <span class="methodname">getUppercase()</span>: set and retrieve
                    the flag indicating whether or not the input should be cast to
                    <acronym class="acronym">UPPERCASE</acronym>.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setTrim($flag)</span> and  <span class="methodname">getTrim()</span>:
                    set and retrieve the flag indicating whether or not leading or trailing
                    whitespace should be stripped.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setMaxLength($length)</span> and
                     <span class="methodname">getMaxLength()</span>: set and retrieve the maximum
                    length of input.
                </p>
            </li>
        </ul>

        <div class="example" id="zend.dojo.form.elements.textBox.example"><div class="info"><p><b>Example #18 Example TextBox dijit element usage</b></p></div>
            

            <pre class="programlisting brush: php">
$form-&gt;addElement(
    &#039;TextBox&#039;,
    &#039;foo&#039;,
    array(
        &#039;value&#039;      =&gt; &#039;some text&#039;,
        &#039;label&#039;      =&gt; &#039;TextBox&#039;,
        &#039;trim&#039;       =&gt; true,
        &#039;propercase&#039; =&gt; true,
    )
);
</pre>

        </div>
    </div>

    <div class="section" id="zend.dojo.form.elements.textarea"><div class="info"><h1 class="title">Textarea</h1></div>
        

        <p class="para">
            Textarea acts primarily like a standard <acronym class="acronym">HTML</acronym> textarea. However, it
            does not support either the rows or cols settings. Instead, the
            textarea width should be specified using standard <acronym class="acronym">CSS</acronym> measurements;
            rows should be omitted entirely. The textarea will then grow
            vertically as text is added to it.
        </p>

        <div class="example" id="zend.dojo.form.elements.textarea.example"><div class="info"><p><b>Example #19 Example Textarea dijit element usage</b></p></div>
            

            <pre class="programlisting brush: php">
$form-&gt;addElement(
    &#039;Textarea&#039;,
    &#039;textarea&#039;,
    array(
        &#039;label&#039;    =&gt; &#039;Textarea&#039;,
        &#039;required&#039; =&gt; true,
        &#039;style&#039;    =&gt; &#039;width: 200px;&#039;,
    )
);
</pre>

        </div>
    </div>

    <div class="section" id="zend.dojo.form.elements.timeTextBox"><div class="info"><h1 class="title">TimeTextBox</h1></div>
        

        <p class="para">
            TimeTextBox is a text input that provides a drop-down for selecting
            a time. The drop-down may be configured to show a certain window of
            time, with specified increments.
        </p>

        <p class="para">
            Internally, TimeTextBox derives from <a href="zend.dojo.form.html#zend.dojo.form.elements.dateTextBox" class="link">DateTextBox</a>,
            <a href="zend.dojo.form.html#zend.dojo.form.elements.validationTextBox" class="link">ValidationTextBox</a>
            and <a href="zend.dojo.form.html#zend.dojo.form.elements.textBox" class="link">TextBox</a>;
            all methods available to those classes are available. In addition,
            the following methods can be used to set individual constraints:
        </p>

        <ul class="itemizedlist">
            <li class="listitem">
                <p class="para">
                     <span class="methodname">setTimePattern($pattern)</span> and
                     <span class="methodname">getTimePattern()</span>: set and retrieve the <a href="http://www.unicode.org/reports/tr35/#Date_Format_Patterns" class="link external">&raquo; unicode
                        time format pattern</a> for formatting the time.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setClickableIncrement($format)</span> and
                     <span class="methodname">getClickableIncrement()</span>: set the <a href="http://en.wikipedia.org/wiki/ISO_8601" class="link external">&raquo; ISO_8601</a>
                    string representing the amount by which every clickable element
                    in the time picker increases.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setVisibleIncrement($format)</span> and
                     <span class="methodname">getVisibleIncrement()</span>: set the increment visible
                    in the time chooser; must follow <b><tt>ISO_8601</tt></b> formats.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setVisibleRange($format)</span> and
                     <span class="methodname">getVisibleRange()</span>: set and retrieve the range of
                    time visible in the time chooser at any given moment; must
                    follow <b><tt>ISO_8601</tt></b> formats.
                </p>
            </li>
        </ul>

        <div class="example" id="zend.dojo.form.elements.timeTextBox.example"><div class="info"><p><b>Example #20 Example TimeTextBox dijit element usage</b></p></div>
            

            <div class="example-contents"><p>
                The following will create a TimeTextBox that displays 2 hours
                at a time, with increments of 10 minutes.
            </p></div>

            <pre class="programlisting brush: php">
$form-&gt;addElement(
    &#039;TimeTextBox&#039;,
    &#039;foo&#039;,
    array(
        &#039;label&#039;              =&gt; &#039;TimeTextBox&#039;,
        &#039;required&#039;           =&gt; true,
        &#039;visibleRange&#039;       =&gt; &#039;T04:00:00&#039;,
        &#039;visibleIncrement&#039;   =&gt; &#039;T00:10:00&#039;,
        &#039;clickableIncrement&#039; =&gt; &#039;T00:10:00&#039;,
    )
);
</pre>

        </div>
    </div>

    <div class="section" id="zend.dojo.form.elements.validationTextBox"><div class="info"><h1 class="title">ValidationTextBox</h1></div>
        

        <p class="para">
            ValidationTextBox provides the ability to add validations and constraints to a text
            input. Internally, it derives from <a href="zend.dojo.form.html#zend.dojo.form.elements.textBox" class="link">TextBox</a>, and adds the following
            accessors and mutators for manipulating dijit parameters:
        </p>

        <ul class="itemizedlist">
            <li class="listitem">
                <p class="para">
                     <span class="methodname">setInvalidMessage($message)</span> and
                     <span class="methodname">getInvalidMessage()</span>: set and retrieve the tooltip
                    message to display when the value does not validate.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setPromptMessage($message)</span> and
                     <span class="methodname">getPromptMessage()</span>: set and retrieve the tooltip
                    message to display for element usage.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setRegExp($regexp)</span> and
                     <span class="methodname">getRegExp()</span>: set and retrieve the regular expression to
                    use for validating the element. The regular expression does not need boundaries
                    (unlike <acronym class="acronym">PHP</acronym>&#039;s preg* family of functions).
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setConstraint($key, $value)</span> and
                     <span class="methodname">getConstraint($key)</span>: set and retrieve additional
                    constraints to use when validating the element; used primarily
                    with subclasses. Constraints are stored in the &#039;constraints&#039;
                    key of the dijit parameters.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">setConstraints(array $constraints)</span> and
                     <span class="methodname">getConstraints()</span>: set and retrieve individual
                    constraints to use when validating the element; used primarily with subclasses.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">hasConstraint($key)</span>: test whether a given constraint
                    exists.
                </p>
            </li>

            <li class="listitem">
                <p class="para">
                     <span class="methodname">removeConstraint($key)</span> and
                     <span class="methodname">clearConstraints()</span>: remove an individual or all
                    constraints for the element.
                </p>
            </li>
        </ul>

        <div class="example" id="zend.dojo.form.elements.validationTextBox.example"><div class="info"><p><b>Example #21 Example ValidationTextBox dijit element usage</b></p></div>
            

            <div class="example-contents"><p>
                The following will create a ValidationTextBox that requires a
                single string consisting solely of word characters (i.e., no
                spaces, most punctuation is invalid).
            </p></div>

            <pre class="programlisting brush: php">
$form-&gt;addElement(
    &#039;ValidationTextBox&#039;,
    &#039;foo&#039;,
    array(
        &#039;label&#039;          =&gt; &#039;ValidationTextBox&#039;,
        &#039;required&#039;       =&gt; true,
        &#039;regExp&#039;         =&gt; &#039;[\w]+&#039;,
        &#039;invalidMessage&#039; =&gt; &#039;Invalid non-space text.&#039;,
    )
);
</pre>

        </div>
    </div>

    <div class="section" id="zend.dojo.form.elements.verticalSlider"><div class="info"><h1 class="title">VerticalSlider</h1></div>
        

        <p class="para">
            VerticalSlider is the sibling of <a href="zend.dojo.form.html#zend.dojo.form.elements.horizontalSlider" class="link">HorizontalSlider</a>,
            and operates in every way like that element. The only real
            difference is that the &#039;top*&#039; and &#039;bottom*&#039; methods are replaced by
            &#039;left*&#039; and &#039;right*&#039;, and instead of using HorizontalRule and
            HorizontalRuleLabels, VerticalRule and VerticalRuleLabels should be
            used.
        </p>

        <div class="example" id="zend.dojo.form.elements.verticalSlider.example"><div class="info"><p><b>Example #22 Example VerticalSlider dijit element usage</b></p></div>
            

            <div class="example-contents"><p>
                The following will create a vertical slider selection with
                integer values ranging from -10 to 10. The left will have labels
                at the 20%, 40%, 60%, and 80% marks. The right will have rules
                at 0, 50%, and 100%. Each time the value is changed, the hidden
                element storing the value will be updated.
            </p></div>

            <pre class="programlisting brush: php">
$form-&gt;addElement(
    &#039;VerticalSlider&#039;,
    &#039;foo&#039;,
    array(
        &#039;label&#039;                    =&gt; &#039;VerticalSlider&#039;,
        &#039;value&#039;                    =&gt; 5,
        &#039;style&#039;                    =&gt; &#039;height: 200px; width: 3em;&#039;,
        &#039;minimum&#039;                  =&gt; -10,
        &#039;maximum&#039;                  =&gt; 10,
        &#039;discreteValues&#039;           =&gt; 11,
        &#039;intermediateChanges&#039;      =&gt; true,
        &#039;showButtons&#039;              =&gt; true,
        &#039;leftDecorationDijit&#039;      =&gt; &#039;VerticalRuleLabels&#039;,
        &#039;leftDecorationContainer&#039;  =&gt; &#039;leftContainer&#039;,
        &#039;leftDecorationLabels&#039;     =&gt; array(
                &#039; &#039;,
                &#039;20%&#039;,
                &#039;40%&#039;,
                &#039;60%&#039;,
                &#039;80%&#039;,
                &#039; &#039;,
        ),
        &#039;rightDecorationDijit&#039; =&gt; &#039;VerticalRule&#039;,
        &#039;rightDecorationContainer&#039; =&gt; &#039;rightContainer&#039;,
        &#039;rightDecorationLabels&#039; =&gt; array(
                &#039;0%&#039;,
                &#039;50%&#039;,
                &#039;100%&#039;,
        ),
    )
);
</pre>

        </div>
    </div>
</div>
    <div class="section" id="zend.dojo.form.examples"><div class="info"><h1 class="title">Dojo Form Examples</h1></div>
    

    <div class="example" id="zend.dojo.form.examples.dojoform"><div class="info"><p><b>Example #23 Using Zend_Dojo_Form</b></p></div>
        

        <div class="example-contents"><p>
            The easiest way to utilize Dojo with <span class="classname">Zend_Form</span> is to
            utilize <span class="classname">Zend_Dojo_Form</span>, either through direct usage or
            by extending it. This example shows extending <span class="classname">Zend_Dojo_Form</span>, and
            shows usage of all dijit elements. It creates four sub forms, and
            decorates the form to utilize a TabContainer, showing each sub form
            in its own tab.
        </p></div>

        <pre class="programlisting brush: php">
class My_Form_Test extends Zend_Dojo_Form
{
    /**
     * Options to use with select elements
     */
    protected $_selectOptions = array(
        &#039;red&#039;    =&gt; &#039;Rouge&#039;,
        &#039;blue&#039;   =&gt; &#039;Bleu&#039;,
        &#039;white&#039;  =&gt; &#039;Blanc&#039;,
        &#039;orange&#039; =&gt; &#039;Orange&#039;,
        &#039;black&#039;  =&gt; &#039;Noir&#039;,
        &#039;green&#039;  =&gt; &#039;Vert&#039;,
    );

    /**
     * Form initialization
     *
     * @return void
     */
    public function init()
    {
        $this-&gt;setMethod(&#039;post&#039;);
        $this-&gt;setAttribs(array(
            &#039;name&#039;  =&gt; &#039;masterForm&#039;,
        ));
        $this-&gt;setDecorators(array(
            &#039;FormElements&#039;,
            array(&#039;TabContainer&#039;, array(
                &#039;id&#039; =&gt; &#039;tabContainer&#039;,
                &#039;style&#039; =&gt; &#039;width: 600px; height: 500px;&#039;,
                &#039;dijitParams&#039; =&gt; array(
                    &#039;tabPosition&#039; =&gt; &#039;top&#039;
                ),
            )),
            &#039;DijitForm&#039;,
        ));
        $textForm = new Zend_Dojo_Form_SubForm();
        $textForm-&gt;setAttribs(array(
            &#039;name&#039;   =&gt; &#039;textboxtab&#039;,
            &#039;legend&#039; =&gt; &#039;Text Elements&#039;,
            &#039;dijitParams&#039; =&gt; array(
                &#039;title&#039; =&gt; &#039;Text Elements&#039;,
            ),
        ));
        $textForm-&gt;addElement(
                &#039;TextBox&#039;,
                &#039;textbox&#039;,
                array(
                    &#039;value&#039;      =&gt; &#039;some text&#039;,
                    &#039;label&#039;      =&gt; &#039;TextBox&#039;,
                    &#039;trim&#039;       =&gt; true,
                    &#039;propercase&#039; =&gt; true,
                )
            )
            -&gt;addElement(
                &#039;DateTextBox&#039;,
                &#039;datebox&#039;,
                array(
                    &#039;value&#039; =&gt; &#039;2008-07-05&#039;,
                    &#039;label&#039; =&gt; &#039;DateTextBox&#039;,
                    &#039;required&#039;  =&gt; true,
                )
            )
            -&gt;addElement(
                &#039;TimeTextBox&#039;,
                &#039;timebox&#039;,
                array(
                    &#039;label&#039; =&gt; &#039;TimeTextBox&#039;,
                    &#039;required&#039;  =&gt; true,
                )
            )
            -&gt;addElement(
                &#039;CurrencyTextBox&#039;,
                &#039;currencybox&#039;,
                array(
                    &#039;label&#039; =&gt; &#039;CurrencyTextBox&#039;,
                    &#039;required&#039;  =&gt; true,
                    // &#039;currency&#039; =&gt; &#039;USD&#039;,
                    &#039;invalidMessage&#039; =&gt; &#039;Invalid amount. &#039; .
                                        &#039;Include dollar sign, commas, &#039; .
                                        &#039;and cents.&#039;,
                    // &#039;fractional&#039; =&gt; true,
                    // &#039;symbol&#039; =&gt; &#039;USD&#039;,
                    // &#039;type&#039; =&gt; &#039;currency&#039;,
                )
            )
            -&gt;addElement(
                &#039;NumberTextBox&#039;,
                &#039;numberbox&#039;,
                array(
                    &#039;label&#039; =&gt; &#039;NumberTextBox&#039;,
                    &#039;required&#039;  =&gt; true,
                    &#039;invalidMessage&#039; =&gt; &#039;Invalid elevation.&#039;,
                    &#039;constraints&#039; =&gt; array(
                        &#039;min&#039; =&gt; -20000,
                        &#039;max&#039; =&gt; 20000,
                        &#039;places&#039; =&gt; 0,
                    )
                )
            )
            -&gt;addElement(
                &#039;ValidationTextBox&#039;,
                &#039;validationbox&#039;,
                array(
                    &#039;label&#039; =&gt; &#039;ValidationTextBox&#039;,
                    &#039;required&#039;  =&gt; true,
                    &#039;regExp&#039; =&gt; &#039;[\w]+&#039;,
                    &#039;invalidMessage&#039; =&gt; &#039;Invalid non-space text.&#039;,
                )
            )
            -&gt;addElement(
                &#039;Textarea&#039;,
                &#039;textarea&#039;,
                array(
                    &#039;label&#039;    =&gt; &#039;Textarea&#039;,
                    &#039;required&#039; =&gt; true,
                    &#039;style&#039;    =&gt; &#039;width: 200px;&#039;,
                )
            );
        $editorForm = new Zend_Dojo_Form_SubForm();
        $editorForm-&gt;setAttribs(array(
            &#039;name&#039;   =&gt; &#039;editortab&#039;,
            &#039;legend&#039; =&gt; &#039;Editor&#039;,
            &#039;dijitParams&#039; =&gt; array(
                &#039;title&#039; =&gt; &#039;Editor&#039;
            ),
        ))
        $editorForm-&gt;addElement(
            &#039;Editor&#039;,
            &#039;wysiwyg&#039;,
            array(
                &#039;label&#039;        =&gt; &#039;Editor&#039;,
                &#039;inheritWidth&#039; =&gt; &#039;true&#039;,
            )
        );

        $toggleForm = new Zend_Dojo_Form_SubForm();
        $toggleForm-&gt;setAttribs(array(
            &#039;name&#039;   =&gt; &#039;toggletab&#039;,
            &#039;legend&#039; =&gt; &#039;Toggle Elements&#039;,
        ));
        $toggleForm-&gt;addElement(
                &#039;NumberSpinner&#039;,
                &#039;ns&#039;,
                array(
                    &#039;value&#039;             =&gt; &#039;7&#039;,
                    &#039;label&#039;             =&gt; &#039;NumberSpinner&#039;,
                    &#039;smallDelta&#039;        =&gt; 5,
                    &#039;largeDelta&#039;        =&gt; 25,
                    &#039;defaultTimeout&#039;    =&gt; 1000,
                    &#039;timeoutChangeRate&#039; =&gt; 100,
                    &#039;min&#039;               =&gt; 9,
                    &#039;max&#039;               =&gt; 1550,
                    &#039;places&#039;            =&gt; 0,
                    &#039;maxlength&#039;         =&gt; 20,
                )
            )
            -&gt;addElement(
                &#039;Button&#039;,
                &#039;dijitButton&#039;,
                array(
                    &#039;label&#039; =&gt; &#039;Button&#039;,
                )
            )
            -&gt;addElement(
                &#039;CheckBox&#039;,
                &#039;checkbox&#039;,
                array(
                    &#039;label&#039; =&gt; &#039;CheckBox&#039;,
                    &#039;checkedValue&#039;  =&gt; &#039;foo&#039;,
                    &#039;uncheckedValue&#039;  =&gt; &#039;bar&#039;,
                    &#039;checked&#039; =&gt; true,
                )
            )
            -&gt;addElement(
                &#039;RadioButton&#039;,
                &#039;radiobutton&#039;,
                array(
                    &#039;label&#039; =&gt; &#039;RadioButton&#039;,
                    &#039;multiOptions&#039;  =&gt; array(
                        &#039;foo&#039; =&gt; &#039;Foo&#039;,
                        &#039;bar&#039; =&gt; &#039;Bar&#039;,
                        &#039;baz&#039; =&gt; &#039;Baz&#039;,
                    ),
                    &#039;value&#039; =&gt; &#039;bar&#039;,
                )
            );
        $selectForm = new Zend_Dojo_Form_SubForm();
        $selectForm-&gt;setAttribs(array(
            &#039;name&#039;   =&gt; &#039;selecttab&#039;,
            &#039;legend&#039; =&gt; &#039;Select Elements&#039;,
        ));
        $selectForm-&gt;addElement(
                &#039;ComboBox&#039;,
                &#039;comboboxselect&#039;,
                array(
                    &#039;label&#039; =&gt; &#039;ComboBox (select)&#039;,
                    &#039;value&#039; =&gt; &#039;blue&#039;,
                    &#039;autocomplete&#039; =&gt; false,
                    &#039;multiOptions&#039; =&gt; $this-&gt;_selectOptions,
                )
            )
            -&gt;addElement(
                &#039;ComboBox&#039;,
                &#039;comboboxremote&#039;,
                array(
                    &#039;label&#039; =&gt; &#039;ComboBox (remoter)&#039;,
                    &#039;storeId&#039; =&gt; &#039;stateStore&#039;,
                    &#039;storeType&#039; =&gt; &#039;dojo.data.ItemFileReadStore&#039;,
                    &#039;storeParams&#039; =&gt; array(
                        &#039;url&#039; =&gt; &#039;/js/states.txt&#039;,
                    ),
                    &#039;dijitParams&#039; =&gt; array(
                        &#039;searchAttr&#039; =&gt; &#039;name&#039;,
                    ),
                )
            )
            -&gt;addElement(
                &#039;FilteringSelect&#039;,
                &#039;filterselect&#039;,
                array(
                    &#039;label&#039; =&gt; &#039;FilteringSelect (select)&#039;,
                    &#039;value&#039; =&gt; &#039;blue&#039;,
                    &#039;autocomplete&#039; =&gt; false,
                    &#039;multiOptions&#039; =&gt; $this-&gt;_selectOptions,
                )
            )
            -&gt;addElement(
                &#039;FilteringSelect&#039;,
                &#039;filterselectremote&#039;,
                array(
                    &#039;label&#039; =&gt; &#039;FilteringSelect (remoter)&#039;,
                    &#039;storeId&#039; =&gt; &#039;stateStore&#039;,
                    &#039;storeType&#039; =&gt; &#039;dojo.data.ItemFileReadStore&#039;,
                    &#039;storeParams&#039; =&gt; array(
                        &#039;url&#039; =&gt; &#039;/js/states.txt&#039;,
                    ),
                    &#039;dijitParams&#039; =&gt; array(
                        &#039;searchAttr&#039; =&gt; &#039;name&#039;,
                    ),
                )
            );
        $sliderForm = new Zend_Dojo_Form_SubForm();
        $sliderForm-&gt;setAttribs(array(
            &#039;name&#039;   =&gt; &#039;slidertab&#039;,
            &#039;legend&#039; =&gt; &#039;Slider Elements&#039;,
        ));
        $sliderForm-&gt;addElement(
                &#039;HorizontalSlider&#039;,
                &#039;horizontal&#039;,
                array(
                    &#039;label&#039; =&gt; &#039;HorizontalSlider&#039;,
                    &#039;value&#039; =&gt; 5,
                    &#039;minimum&#039; =&gt; -10,
                    &#039;maximum&#039; =&gt; 10,
                    &#039;discreteValues&#039; =&gt; 11,
                    &#039;intermediateChanges&#039; =&gt; true,
                    &#039;showButtons&#039; =&gt; true,
                    &#039;topDecorationDijit&#039; =&gt; &#039;HorizontalRuleLabels&#039;,
                    &#039;topDecorationContainer&#039; =&gt; &#039;topContainer&#039;,
                    &#039;topDecorationLabels&#039; =&gt; array(
                            &#039; &#039;,
                            &#039;20%&#039;,
                            &#039;40%&#039;,
                            &#039;60%&#039;,
                            &#039;80%&#039;,
                            &#039; &#039;,
                    ),
                    &#039;topDecorationParams&#039; =&gt; array(
                        &#039;container&#039; =&gt; array(
                            &#039;style&#039; =&gt; &#039;height:1.2em; &#039; .
                                       &#039;font-size=75%;color:gray;&#039;,
                        ),
                        &#039;list&#039; =&gt; array(
                            &#039;style&#039; =&gt; &#039;height:1em; &#039; .
                                       &#039;font-size=75%;color:gray;&#039;,
                        ),
                    ),
                    &#039;bottomDecorationDijit&#039; =&gt; &#039;HorizontalRule&#039;,
                    &#039;bottomDecorationContainer&#039; =&gt; &#039;bottomContainer&#039;,
                    &#039;bottomDecorationLabels&#039; =&gt; array(
                            &#039;0%&#039;,
                            &#039;50%&#039;,
                            &#039;100%&#039;,
                    ),
                    &#039;bottomDecorationParams&#039; =&gt; array(
                        &#039;list&#039; =&gt; array(
                            &#039;style&#039; =&gt; &#039;height:1em; &#039; .
                                       &#039;font-size=75%;color:gray;&#039;,
                        ),
                    ),
                )
            )
            -&gt;addElement(
                &#039;VerticalSlider&#039;,
                &#039;vertical&#039;,
                array(
                    &#039;label&#039; =&gt; &#039;VerticalSlider&#039;,
                    &#039;value&#039; =&gt; 5,
                    &#039;style&#039; =&gt; &#039;height: 200px; width: 3em;&#039;,
                    &#039;minimum&#039; =&gt; -10,
                    &#039;maximum&#039; =&gt; 10,
                    &#039;discreteValues&#039; =&gt; 11,
                    &#039;intermediateChanges&#039; =&gt; true,
                    &#039;showButtons&#039; =&gt; true,
                    &#039;leftDecorationDijit&#039; =&gt; &#039;VerticalRuleLabels&#039;,
                    &#039;leftDecorationContainer&#039; =&gt; &#039;leftContainer&#039;,
                    &#039;leftDecorationLabels&#039; =&gt; array(
                            &#039; &#039;,
                            &#039;20%&#039;,
                            &#039;40%&#039;,
                            &#039;60%&#039;,
                            &#039;80%&#039;,
                            &#039; &#039;,
                    ),
                    &#039;rightDecorationDijit&#039; =&gt; &#039;VerticalRule&#039;,
                    &#039;rightDecorationContainer&#039; =&gt; &#039;rightContainer&#039;,
                    &#039;rightDecorationLabels&#039; =&gt; array(
                            &#039;0%&#039;,
                            &#039;50%&#039;,
                            &#039;100%&#039;,
                    ),
                )
            );

        $this-&gt;addSubForm($textForm, &#039;textboxtab&#039;)
             -&gt;addSubForm($editorForm, &#039;editortab&#039;)
             -&gt;addSubForm($toggleForm, &#039;toggletab&#039;)
             -&gt;addSubForm($selectForm, &#039;selecttab&#039;)
             -&gt;addSubForm($sliderForm, &#039;slidertab&#039;);
    }
}
</pre>

    </div>

    <div class="example" id="zend.dojo.form.examples.decorating"><div class="info"><p><b>Example #24 Modifying an existing form to utilize Dojo</b></p></div>
        

        <div class="example-contents"><p>
            Existing forms can be modified to utilize Dojo as well, by use of
            the  <span class="methodname">Zend_Dojo::enableForm()</span> static method.
        </p></div>

        <div class="example-contents"><p>
            This first example shows decorating an existing form instance:
        </p></div>

        <pre class="programlisting brush: php">
$form = new My_Custom_Form();
Zend_Dojo::enableForm($form);
$form-&gt;addElement(
&#039;ComboBox&#039;,
&#039;query&#039;,
array(
    &#039;label&#039;        =&gt; &#039;Color:&#039;,
    &#039;value&#039;        =&gt; &#039;blue&#039;,
    &#039;autocomplete&#039; =&gt; false,
    &#039;multiOptions&#039; =&gt; array(
        &#039;red&#039;    =&gt; &#039;Rouge&#039;,
        &#039;blue&#039;   =&gt; &#039;Bleu&#039;,
        &#039;white&#039;  =&gt; &#039;Blanc&#039;,
        &#039;orange&#039; =&gt; &#039;Orange&#039;,
        &#039;black&#039;  =&gt; &#039;Noir&#039;,
        &#039;green&#039;  =&gt; &#039;Vert&#039;,
    ),
)
);
</pre>


        <div class="example-contents"><p>
            Alternately, you can make a slight tweak to your form
            initialization:
        </p></div>

        <pre class="programlisting brush: php">
class My_Custom_Form extends Zend_Form
{
    public function init()
    {
        Zend_Dojo::enableForm($this);

        // ...
    }
}
</pre>


        <div class="example-contents"><p>
            Of course, if you can do that... you could and should simply alter
            the class to inherit from <span class="classname">Zend_Dojo_Form</span>, which is a drop-in
            replacement of <span class="classname">Zend_Form</span> that&#039;s already Dojo-enabled...
        </p></div>
    </div>
</div>
</div>
        <hr />

            <table width="100%">
                <tr>
                    <td width="25%" style="text-align: left;">
                    <a href="zend.dojo.view.html">Dojo View Helpers</a>
                    </td>

                    <td width="50%" style="text-align: center;">
                        <div class="up"><span class="up"><a href="zend.dojo.html">Zend_Dojo</a></span><br />
                        <span class="home"><a href="manual.html">Guia de Refer&ecirc;ncia do Programador</a></span></div>
                    </td>

                    <td width="25%" style="text-align: right;">
                        <div class="next" style="text-align: right; float: right;"><a href="zend.dojo.build-layers.html">Zend_Dojo build layer support</a></div>
                    </td>
                </tr>
            </table>
</td>
        <td style="font-size: smaller;" width="15%"> <style type="text/css">
#leftbar {
	float: left;
	width: 186px;
	padding: 5px;
	font-size: smaller;
}
ul.toc {
	margin: 0px 5px 5px 5px;
	padding: 0px;
}
ul.toc li {
	font-size: 85%;
	margin: 1px 0 1px 1px;
	padding: 1px 0 1px 11px;
	list-style-type: none;
	background-repeat: no-repeat;
	background-position: center left;
}
ul.toc li.header {
	font-size: 115%;
	padding: 5px 0px 5px 11px;
	border-bottom: 1px solid #cccccc;
	margin-bottom: 5px;
}
ul.toc li.active {
	font-weight: bold;
}
ul.toc li a {
	text-decoration: none;
}
ul.toc li a:hover {
	text-decoration: underline;
}
</style>
 <ul class="toc">
  <li class="header home"><a href="manual.html">Guia de Refer&ecirc;ncia do Programador</a></li>
  <li class="header up"><a href="manual.html">Guia de Refer&ecirc;ncia do Programador</a></li>
  <li class="header up"><a href="reference.html">Refer&ecirc;ncia do Zend Framework</a></li>
  <li class="header up"><a href="zend.dojo.html">Zend_Dojo</a></li>
  <li><a href="zend.dojo.introduction.html">Introduction</a></li>
  <li><a href="zend.dojo.data.html">Zend_Dojo_Data: dojo.data Envelopes</a></li>
  <li><a href="zend.dojo.view.html">Dojo View Helpers</a></li>
  <li class="active"><a href="zend.dojo.form.html">Dojo Form Elements and Decorators</a></li>
  <li><a href="zend.dojo.build-layers.html">Zend_Dojo build layer support</a></li>
 </ul>
 </td>
    </tr>
</table>

<script type="text/javascript" src="../js/shCore.js"></script>
<script type="text/javascript" src="../js/shAutoloader.js"></script>
<script type="text/javascript" src="../js/main.js"></script>

</body>
</html>